<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员注册页面</title>
	<base th:href="@{/}">
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="static/css/register.css" />

		<script src="static/script/vue.js"></script>
	  	<script src="static/script/axios.min.js"></script>

    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
  </head>
  <body>
		<div id="app">
			<div id="login_header">
				<a href="index.html">
					<img class="logo_img" alt="" src="static/img/logo.gif" />
				</a>
			</div>

			<div class="login_banner">
				<div class="register_form">
					<h1>注册尚硅谷会员</h1>
					<!--<form action="regist_success.html" method="post">-->
					<form action="user?method=register" method="post">
						<div class="form-item">
							<div>
								<label>用户名称:</label>
								<input type="text" placeholder="请输入用户名" name="username" v-model="user.usermame" @blur="checkUsername"/>
							</div>
							<span class="errMess" v-text="msg.usernameErrorMsg"></span>
						</div>
						<div class="form-item">
							<div>
								<label>用户密码:</label>
								<input type="password" placeholder="请输入密码" name="password" v-model="user.password" @blur="checkPassword"/>
							</div>
							<span class="errMess" v-text="msg.passwordErrorMsg"></span>
						</div>
						<div class="form-item">
							<div>
								<label>确认密码:</label>
								<input type="password" placeholder="请输入确认密码" v-model="user.password2" @blur="checkPassword2"/>
							</div>
							<span class="errMess"v-text="msg.passwordErrorMsg2"></span>
						</div>
						<div class="form-item">
							<div>
								<label>用户邮箱:</label>
								<input type="text" placeholder="请输入邮箱" name="email" v-model="user.email" @blur="checkEmail"/>
							</div>
							<span class="errMess" v-text="msg.emailErrorMsg"></span>
						</div>
			 
						<div class="form-item">
							<div>
								<label>验证码:</label>
								<div class="verify">
									<input type="text" placeholder="" v-model="code" @blur="checkCode"/>
									<img :src="codeSrc" alt="" width="110px" height="50px" @click="changeCode"/>
								</div>
							</div>
							<span class="errMess" v-text="msg.codeMsg"></span>
						</div>
						<button class="btn" @click="regist">注册</button>
					</form>
				</div>
			</div>
			<div id="bottom">
				<span>
					尚硅谷书城.Copyright &copy;2015
				</span>
			</div>
		</div>
		
		<!-- 定义vue对象 -->
		<script type="text/javascript">
			
			const app = new Vue({
				el: "#app",
				data: {
					msg: {
						usernameErrorMsg: "用户名应为6~16位数字和字母组成",
						passwordErrorMsg: "密码的长度至少为8位",
						passwordErrorMsg2: "密码两次输入不一致",
						emailErrorMsg: "请输入正确的邮箱格式",
						codeMsg: "请输入正确的验证码"
					},
					user: {
						usermame: '',
						password: '',
						password2: '',
						email: ''
					},
					//绑定验证码请求
					codeSrc: 'code',
					//验证码输入框数据绑定
					code: '',
					//定义全局表单提交标识符
					flagArray : [0,0,0,0,0]
				},
				methods: {
					async checkUsername(){
						 //1.定义正则表达式语法
						 let usernameRege = /^[a-zA-Z0-9]{6,16}$/
						 let usernameFlag = usernameRege.test(this.user.usermame)
						 if(usernameFlag){
							 let {data: result} = await axios.get("user?method=checkUser&username=" + this.user.usermame)
							 if (result.flag){
								 this.msg.usernameErrorMsg = "√"
								 this.flagArray[0] = 1
							 }else{
							 	 this.msg.usernameErrorMsg = "用户已存在"
								 this.flagArray[0] = 0
							 }

						 }else{
							 this.msg.usernameErrorMsg = "用户名应为6~16位数字和字母组成"
							 this.flagArray[0] = 0
						 }
					},
					checkPassword(){
						let passwordRege = /^.{8,}$/
						let passwordFlag = passwordRege.test(this.user.password)
						if(passwordFlag){
							this.msg.passwordErrorMsg = "√"
							this.flagArray[1] = 1
						}else{
							this.msg.passwordErrorMsg = "密码的长度至少为8位"
							this.flagArray[1] = 0
						}
					},
					checkPassword2(){
						if (this.user.password2 === ''){
							this.msg.passwordErrorMsg2 = '确认密码不能为空'
							return
						}
						if(this.user.password === this.user.password2){
							this.msg.passwordErrorMsg2 = "√"
							this.flagArray[2] = 1
						}else{
							this.msg.passwordErrorMsg2 = "密码两次输入不一致"
							this.flagArray[2] = 0
						}
					},
					checkEmail(){
						let emailRege = /^[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/
						if(emailRege.test(this.user.email)){
							this.msg.emailErrorMsg = '√'
							this.flagArray[3] = 1
						}else{
							this.msg.emailErrorMsg = "请输入正确的邮箱格式"
							this.flagArray[3] = 0
						}
					},
					changeCode(){
						this.codeSrc = "code?date=" + Date.now()
					},
					async checkCode(){
						if (this.code===''){
							this.msg.codeMsg='请输入验证码'
						}else{
							let {data: result} = await axios.get("user?method=checkCode&code=" + this.code)
							if (result.flag){
								this.msg.codeMsg='√'
								this.flagArray[4] = 1
							}else{
								this.msg.codeMsg='验证码错误请重新输入'
								this.flagArray[4] = 0
							}
						}
					},
					regist(){
						//再次校验密码是否相同即可.
						this.checkPassword2()
						let flagStr = this.flagArray.join(",")
						if(flagStr !== "1,1,1,1,1"){
							//应该阻止表单提交
							event.preventDefault()
							alert("表单校验不通过!!!")
						}else{
							alert("表单校验成功")
						}
						
					}
				}
			})
		
		</script>
  </body>
</html>
